import React, {PureComponent} from 'react';
import {StyleSheet, View, Image, TouchableWithoutFeedback} from 'react-native';
import Swiper from 'react-native-swiper';
import utils from '../../common/utils';

const width = utils.getScreen().width,
    height = width / 1.7857142857142858;
export default class extends PureComponent {
    render() {
        const {bannerList, navigation} = this.props;
        return (
            <View style={styles.wrapper}>
                {
                    bannerList.length > 0 ?
                        <Swiper style={styles.wrapper} showsButtons={false} autoplay={true}
                                paginationStyle={styles.paginationStyle}
                                activeDotColor="red">
                            {
                                bannerList.map(item =>
                                    <TouchableWithoutFeedback key={item.num_iid} onPress={() => {
                                        navigation.navigate('goodsDetail', {itemId: item.num_iid});
                                    }}>
                                        <Image
                                            source={{uri: item.banner_img}}
                                            style={styles.image}/>
                                    </TouchableWithoutFeedback>
                                )
                            }
                        </Swiper>
                        : null
                }
            </View>
        );
    }
}

const styles = StyleSheet.create({
    wrapper: {
        height
    },
    paginationStyle: {
        bottom: 5
    },
    image: {
        width: width,
        height
    }
});
